<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Puzzle Pieces</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(10, 50px);
      grid-template-rows: repeat(10, 50px);
      gap: 50px;
      transition-duration: 2s;
    }

    .grid-container:hover {
      gap: 0px;
    }

    .grid-container .puzzle-piece {
      width: 50px;
      height: 50px;
      background-image: url("https://picsum.photos/2000/1000?random=100");
      background-size: cover; /* Ensures the image covers the puzzle piece */
      background-position: center; /* Centers the image inside the puzzle piece */
      border-radius: 50%;
      transition-duration: 2s;
    }

    .grid-container .puzzle-piece:nth-child(6n) {
      transform: rotate(360deg) translateX(100px);
    }

    .grid-container .puzzle-piece:nth-child(6n + 1) {
      transform: rotate(-90deg) translateY(-100px);
    }

    .grid-container .puzzle-piece:nth-child(6n + 2) {
      transform: rotate(180deg) translateY(100px);
    }

    .grid-container .puzzle-piece:nth-child(6n + 3) {
      transform: rotate(270deg) translateX(-100px);
    }

    .grid-container .puzzle-piece:nth-child(6n + 4) {
      transform: rotate(90deg) translateX(100px);
    }

    .grid-container .puzzle-piece:nth-child(6n + 5) {
      transform: rotate(-180deg) translateX(-100px);
    }

    .grid-container:hover .puzzle-piece {
      transform: rotate(0deg) translate(0, 0);
      border-radius: 0%;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="puzzle-piece" style="background-position: 0px 0px;"></div>
    <div class="puzzle-piece" style="background-position: -50px 0px;"></div>
    <div class="puzzle-piece" style="background-position: -100px 0px;"></div>
    <div class="puzzle-piece" style="background-position: -150px 0px;"></div>
    <div class="puzzle-piece" style="background-position: -200px 0px;"></div>
    <div class="puzzle-piece" style="background-position: -250px 0px;"></div>
    <div class="puzzle-piece" style="background-position: -300px 0px;"></div>
    <div class="puzzle-piece" style="background-position: -350px 0px;"></div>
    <div class="puzzle-piece" style="background-position: -400px 0px;"></div>
    <div class="puzzle-piece" style="background-position: -450px 0px;"></div>

    <div class="puzzle-piece" style="background-position: 0px -50px;"></div>
    <div class="puzzle-piece" style="background-position: -50px -50px;"></div>
    <div class="puzzle-piece" style="background-position: -100px -50px;"></div>
    <div class="puzzle-piece" style="background-position: -150px -50px;"></div>
    <div class="puzzle-piece" style="background-position: -200px -50px;"></div>
    <div class="puzzle-piece" style="background-position: -250px -50px;"></div>
    <div class="puzzle-piece" style="background-position: -300px -50px;"></div>
    <div class="puzzle-piece" style="background-position: -350px -50px;"></div>
    <div class="puzzle-piece" style="background-position: -400px -50px;"></div>
    <div class="puzzle-piece" style="background-position: -450px -50px;"></div>

    <div class="puzzle-piece" style="background-position: 0px -100px;"></div>
    <div class="puzzle-piece" style="background-position: -50px -100px;"></div>
    <div class="puzzle-piece" style="background-position: -100px -100px;"></div>
    <div class="puzzle-piece" style="background-position: -150px -100px;"></div>
    <div class="puzzle-piece" style="background-position: -200px -100px;"></div>
    <div class="puzzle-piece" style="background-position: -250px -100px;"></div>
    <div class="puzzle-piece" style="background-position: -300px -100px;"></div>
    <div class="puzzle-piece" style="background-position: -350px -100px;"></div>
    <div class="puzzle-piece" style="background-position: -400px -100px;"></div>
    <div class="puzzle-piece" style="background-position: -450px -100px;"></div>

    <div class="puzzle-piece" style="background-position: 0px -150px;"></div>
    <div class="puzzle-piece" style="background-position: -50px -150px;"></div>
    <div class="puzzle-piece" style="background-position: -100px -150px;"></div>
    <div class="puzzle-piece" style="background-position: -150px -150px;"></div>
    <div class="puzzle-piece" style="background-position: -200px -150px;"></div>
    <div class="puzzle-piece" style="background-position: -250px -150px;"></div>
    <div class="puzzle-piece" style="background-position: -300px -150px;"></div>
    <div class="puzzle-piece" style="background-position: -350px -150px;"></div>
    <div class="puzzle-piece" style="background-position: -400px -150px;"></div>
    <div class="puzzle-piece" style="background-position: -450px -150px;"></div>

    <div class="puzzle-piece" style="background-position: 0px -200px;"></div>
    <div class="puzzle-piece" style="background-position: -50px -200px;"></div>
    <div class="puzzle-piece" style="background-position: -100px -200px;"></div>
    <div class="puzzle-piece" style="background-position: -150px -200px;"></div>
    <div class="puzzle-piece" style="background-position: -200px -200px;"></div>
    <div class="puzzle-piece" style="background-position: -250px -200px;"></div>
    <div class="puzzle-piece" style="background-position: -300px -200px;"></div>
    <div class="puzzle-piece" style="background-position: -350px -200px;"></div>
    <div class="puzzle-piece" style="background-position: -400px -200px;"></div>
    <div class="puzzle-piece" style="background-position: -450px -200px;"></div>

    <div class="puzzle-piece" style="background-position: 0px -250px;"></div>
    <div class="puzzle-piece" style="background-position: -50px -250px;"></div>
    <div class="puzzle-piece" style="background-position: -100px -250px;"></div>
    <div class="puzzle-piece" style="background-position: -150px -250px;"></div>
    <div class="puzzle-piece" style="background-position: -200px -250px;"></div>
    <div class="puzzle-piece" style="background-position: -250px -250px;"></div>
    <div class="puzzle-piece" style="background-position: -300px -250px;"></div>
    <div class="puzzle-piece" style="background-position: -350px -250px;"></div>
    <div class="puzzle-piece" style="background-position: -400px -250px;"></div>
    <div class="puzzle-piece" style="background-position: -450px -250px;"></div>
  </div>
</body>
</html>
